import React from 'react';
import {NavLink} from 'react-router-dom';
import './nav.css';

const NavBar=()=>( //这里是括号，并不是{}注意一下
    <div>
        <div>
            <NavLink exact to='/' className="blue">Dfei</NavLink> |&nbsp;
            <NavLink to='/Dfeib' style={{color:'red',fontSize:'30px'}}>Dfeib</NavLink> |&nbsp;
            <NavLink to='/Dfeic/ILoveWeb' activeClassName="Tactive">Dfeic</NavLink> |&nbsp;
            <NavLink to='/MMP'>no page 404</NavLink> |&nbsp;
            <NavLink to='/redirect' >Redirect(go Dfeib)</NavLink>
        </div>
    </div>
)

export default NavBar;

/**
 * NavLink小技巧
 *      1. 直接加class的方式，利用className的方式  <NavLink exact to='/' className="blue">Dfei</NavLink>
 *      2. 加行内样式  <NavLink to='/Dfeib' style={{color:'red',fontSize:'30px'}}  不推荐这样用
 *      3. react链接点击选中，默认会有active这个class, 但是如果不想用默认的，可以改掉，利用 activeClassName="me" ，则点击选中就是这个me的class的名字，也就是说，会把默认的冲掉，变成自己的，这样的方式，有利于避免class同名（个人理解）
 * 
 * 
 *  NavLink默认解析成的是a超链接
 * */ 